<template>
	<div class="partnerList">
		<div class="partnerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">直播分享记录<i class="el-icon-close"></i></div>
		</div>
		<div class="partnerList_bottom">
			<div class="partnerList_bottom_new" style="height: auto;">
				<div class="partnerList_bottom_new_goods">
					<div class="partnerList_bottom_new_goods_screening">
						<div class="partnerList_bottom_new_goods_screening_right">
							<span>日期：</span>
							<el-date-picker
							  style="margin-right: 20px"
							  clearable
							  v-model="valueTime"
							  :picker-options="pickerOptions"
							  type="daterange"
							  @change="selectTime"
							  range-separator="至"
							  start-placeholder="开始日期"
							  end-placeholder="结束日期"
							>
							</el-date-picker>
							<el-input v-model="share_info" placeholder="分享者搜索" style="margin-right:10px;" clearable></el-input>
							<el-input v-model="keyword" placeholder="直播房间搜索" clearable></el-input>
							<el-button  type="primary"size="medium" @click="handerSeach"><i class="el-icon-search"></i>搜索</el-button>
							<div class="inputSearch">
							  <el-popover
							    placement="bottom"
							    width="310"
							    @hide="hideFN"
							    v-model="exportVisible"
							  >
							    <div
							      style="
							        display: flex;
							        align-items: center;
							        justify-content: flex-end;
							      "
							    >
							      从第几条开始导出：<el-input
							        style="width: 50%"
							        @blur="inputStartNo"
							        v-model="start_no"
							        placeholder="请输入"
							        type="number"
							      ></el-input>
							    </div>
							    <div
							      style="
							        display: flex;
							        align-items: center;
							        margin: 10px 0;
							        justify-content: flex-end;
							      "
							    >
							      导出数量(最大5000)：<el-input
							        style="width: 50%"
							        @blur="inputEndNo"
							        v-model="end_no"
							        placeholder="请输入"
							        type="number"
							      ></el-input>
							    </div>
							    <div style="text-align: right; margin: 0">
							      <el-button size="mini" type="text" @click="exportVisible = false"
							        >取消</el-button
							      >
							      <el-button type="primary" size="mini" @click="outFile"
							        >确定</el-button
							      >
							    </div>
							    <el-button
							      slot="reference"
							      style="margin-right: 10px"
							      type="primary"
							      size="medium"
							      >导出</el-button>
							  </el-popover>
							  </div>
							
						</div>
					</div>
				</div>
			</div>
			<div class="partnerList_table">
				<div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>房间名称</th>
							<th>直播房间</th>
							<th>分享者昵称</th>
							<th>分享者手机号</th>
							<th>观看者手机号</th>
							<th>观看者昵称</th>
							<th>创建时间</th>
							<!-- <th>操作</th> -->
						</tr>
						<tr v-for="(v,i) in listData" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
									@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.roomname}}</td>
							<!-- <td>{{v.status==0?'隐藏':v.status==1?'显示':''}}</td> -->
							<td>
								{{v.roomid}}
							</td>
							<td>
								{{v.snickname}}
							</td>
							<td>
								{{v.smobile}}
							</td>
							<td>
								{{v.cmobile}}
							</td>
							<td>
								{{v.cnickname}}
							</td>
							<td>
								{{v.created_at}}
							</td>
							<!-- <td>
								<button class="editor shelves"  @click="toChangeStatus(v.id)">编辑</button>
							</td> -->
						</tr>
						<tr v-if="listData.length == 0">
							<td class="table_title" colspan="10">当前数据空空如也</td>
						</tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i
										class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total" background>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		components: {
          
		},
		data() {
			return {
				listData: [],
				cate: {},
				checkAll: false,
				page: 1,
				pageSize: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				tableList: [],
				dialogVisible: false,
				radioCate: '0',
				cateName: '',
				cateSort: 0,
				share_info:'',
				// 导出弹出框
				exportVisible: false,
				start_no: 1, //从第几条开始导出
				end_no: 100, //导出数量
				keyword:'',//模糊搜索 房间搜索
				valueTime:'',
				valueTimes:'',//日期赋值
				pickerOptions: {
				  disabledDate(time) {
				    return time.getTime() > Date.now() - 8.64e6;
				  },
				},
				startDate: "",
				endDate: "",
			}
		},
		mounted() {
			this.getShareList()
		},

		methods: {
			// 获取小程序直播分享列表
			getShareList() {
				let valueTime=this.valueTimes;
				let screenDate=valueTime.split(",");
				console.log(screenDate.length,'screenDate')
				let params = {
					share_info: this.share_info,//分享者信息查询
					page: this.page,
					pagesize: this.pageSize,
					keyword:this.keyword,//房间搜索
					created_at:screenDate.length<=1?[]:screenDate,
				}
				let that = this;
				that.$http.post('/api/root/wx/live/invitation/records', params).then(res => {
					if (res.code === 1) {
						var data = res.data.records
						if (data.length > 0) {
							that.total = res.data.count
							that.listData = data
						} else {
							that.total = 0
							that.listData = []
						}
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			// 更改状态
			toChangeStatus(id, sta) {
				this.MadalTitle = "编辑直播"
				this.visible = true
			},
			// 导出弹出隐藏
			hideFN() {
			  this.start_no = 1;
			  this.end_no = 100;
			},
			// 选择时间
			selectTime() {
			  this.startDate = this.valueTime
			    ? this.$moment(this.valueTime[0]).format("yyyy-MM-DD 00:00:00")
			    : "";
			  this.endDate = this.valueTime
			    ? this.$moment(this.valueTime[1]).format("yyyy-MM-DD 23:59:59")
			    : "";
				if(this.valueTime==''|| this.valueTime==null){
					this.valueTimes='';
				}else{
					this.valueTimes=this.startDate+','+this.endDate
				}
				console.log('this.valueTime',this.valueTime)
			   this.getShareList();
			},
            outFile() {
              if (this.start_no == "") {
                this.$message.warning("请输入从第几条开始导出");
                return;
              }
              if (this.end_no == "") {
                this.$message.warning("请输入导出数量");
                return;
              }
              var a = document.createElement("a");
              a.setAttribute(
                "href",
                `/api/root/wx/live/invitation/export?keyword=${this.keyword}&start_no=${this.start_no}&end_no=${this.end_no}`
              );
              a.setAttribute("target", "_blank");
              a.setAttribute("id", "startTelMedicine");
              // 防止反复添加
              if (document.getElementById("startTelMedicine")) {
                document.body.removeChild(document.getElementById("startTelMedicine"));
              }
              document.body.appendChild(a);
              a.click();
            },
			// 输入验证
			inputStartNo() {
			  if (this.start_no * 1 < 1) {
			    this.start_no = 1;
			    this.$message.warning("最小为第1条开始导出");
			  } else if (this.start_no * 1 > this.total * 1) {
			    this.start_no = this.total;
			    this.$message.warning(`最大为第${this.total}条开始导出`);
			  }
			},
			inputEndNo() {
			  if (this.end_no * 1 < 1) {
			    this.end_no = 1;
			    this.$message.warning("最小导出数量为1");
			  } else if (this.end_no * 1 > 5000) {
			    this.end_no = 5000;
			    this.$message.warning("最大导出数量为5000");
			  }
			},
		 // 排序按钮
			changeSort(id, sort) {
				console.log(id, sort, '=====');
				let sor = {
					[`${id}`]: sort
				}
				let sortArr = JSON.stringify(sor)
				this.$http.post('/api/root/LiveCategory/saveOrder', {
					sort: sortArr
				}).then(res => {
					console.log(res, '排序结果');
					if (res.code == 1) {
						this.getShareList()
						this.$message.success('操作成功')
					} else {
						this.$message.warning(res.msg)
					}
				})
			},

			// 删除按钮
			toDel(id) {
				this.$confirm('确定删除该分类吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('/api/root/LiveCategory/del', {
						id
					}).then(res => {
						console.log(res, '删除结果');
						if (res.code == 1) {
							this.$message.success('删除成功')
						} else {
							this.$message.warning(res.msg)
						}
					})
				}).catch(() => {
					console.log('点击取消');
				})
			},

			// 搜索
			handerSeach() {
				this.page=1
				this.getShareList()
			},

			// 详情按钮
			toEdit(id) {
				this.$router.push({
					name: 'estateAdd',
					query: {
						id
					}
				})
			},

			// 状态选择
			statusSelectFn(e) {
				console.log(e, '状态选择');
				this.getInfoList()
			},

			// 新增直播分类
			addLiveCate() {
				this.dialogVisible = true
			},
			// 新增分类对话框确定
			addBtn() {
				if (this.cateName == '') {
					this.$message.warning('请输入分类名称')
					return
				}
				let params = {
					name: this.cateName,
					status: this.radioCate,
					sort: this.cateSort
				}
				console.log(params, '添加分类数据');
				this.$http.post('/api/root/LiveCategory/add', params).then(res => {
					console.log(res, '添加分类结果');
					if (res.code == 1) {
						this.$message.success('添加成功')
						
						this.dialogVisible = false
					} else {
						this.$message.warning(res.msg)
					}
				})
			},
			// 对h话框关闭后
			closedFn() {
				this.cateName = ''
				this.radioCate = '0'
			},

			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index != -1) {
						arr.splice(index, 1);
						this.shelvesAlls.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
						this.shelvesAlls.push(this.tableList[v].id.toString());;
					})
				} else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},



			handleSizeChange(val) {
				this.pageSize = val;
				this.getShareList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getShareList()
			},
		}
	}
</script>

<style lang="less" scoped>
	@import 'index.less';
</style>
